<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Customized Analysis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="etbdefi">

<!-- Le styles -->
<link href="resources/css/bootstrap.css" rel="stylesheet">
<link href="resources/css/bootstrap-responsive.css" rel="stylesheet">
<link href="resources/css/docs.css" rel="stylesheet">
<!-- Sandip: <link href="resources/js/google-code-prettify/prettify.css" rel="stylesheet"> -->

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->

<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/highcharts.js"></script>
<!--  <script src="js/gray.js"></script>-->
<script src="resources/js/main.js"></script>
<script src="resources/js/validate.js"></script>
<script src="resources/js/exporting.js"></script>
<script src="resources/js/ajaxreq.js"></script>


</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar">


	<!-- Subhead
================================================== -->
	<header class="jumbotron subhead" id="overview">
		<div class="container" style="margin-top: -3%;">
			<h2 style="font-family: ERICSSON CAPITAL TT; margin-left: 20%;">Ericsson
				Smart Solution</h2>
			<p class=""
				style="font-family: ERICSSON CAPITAL TT; margin-left: 20%;">Ericsson
				One Stop Solution For All Smart Devices.</p>
			<img alt="****" src="resources/img/logo.jpg"
				style="width: 7%; height: 10%; margin-top: -11%;" /> <a
				class="brand" href="/smart-1.0.0-BUILD-SNAPSHOT/"
				style="font-size: 18px; margin-left: 87%;">Log out</a>

		</div>
	</header>


	<div class="container">
		<!-- Docs nav
================================================== -->
		<div class="row">
			<div class="span3 bs-docs-sidebar">
				<ul class="nav nav-list bs-docs-sidenav">
					<li><a href="dashboard.html"><i class="icon-chevron-right"></i>My
							Dashboard</a></li>
					<li><a
						onclick="showme('divdimension');setReportType('CONSUMPTION');setTitle('CONSUMPTION-ANALYSIS-REPORT');"
						href="#"><i class="icon-chevron-right"></i>Consumption
							Analysis</a></li>
					<li><a
						onclick="showme('divdimension');setReportType('ALARM');setTitle('ALARM-ANALYSIS-REPORT');"
						href="#"><i class="icon-chevron-right"></i>Alarm Analysis</a></li>
				</ul>
			</div>
			<div class="span9">
				<div id='divdimension' class="span9" style="display: none">
					<h5>
						<div id='reort_title_pan' class="span8">
							<!-- <h5>${firstReport.name}</h5>-->

						</div>
					</h5>
					<div style="width: 20%; margin-left: 4%;">
						<p style="color: red;">(* for mandatory selection)</p>
					</div>
					<!--<c:set var="listData" value="${firstReport.dimensionMap}" />-->
					<c:forEach items="${firstReport.dimensionMap}" var="dimensions">
						<div id="${dimensions.key}" class="span9">
							<div>
								<div style="color: red; font-size: 16px;">*</div>
								<h5 style="padding-left: 10px; margin-top: -19px;">${dimensions.key}
									:</h5>
							</div>
							<c:forEach items="${dimensions.value.hierarchyLevels}"
								var="hierarchyLevel" varStatus="hierarchyLevelStatus">
								<c:if test="${hierarchyLevelStatus.first}">
									<select id="${hierarchyLevel}"
										name="${dimensions.value.hierarchyLevels[hierarchyLevelStatus.count]}"
										onchange="showGenerateButton(this.id)">
										<option value="select" selected="selected">Select...${hierarchyLevel}</option>
										<c:forEach items="${dimensions.value.currentSetOfValues}"
											var="levelValues">
											<option value="${levelValues}">${levelValues}</option>
										</c:forEach>
										<!--<option value="${levelValues}">${dimensions.value.hierarchyLevels[hierarchyLevelStatus.count]}</option>-->
									</select>
								</c:if>
								<c:if test="${! hierarchyLevelStatus.first}">
									<select id="${hierarchyLevel}"
										name="${dimensions.value.hierarchyLevels[hierarchyLevelStatus.count]}"
										disabled onchange="showGenerateButton(this.id)">
										<option value="select" selected="selected">Select...${hierarchyLevel}</option>
										<!--<option value="${levelValues}">${dimensions.value.hierarchyLevels[hierarchyLevelStatus.count]}</option>-->
									</select>
								</c:if>
							</c:forEach>
						</div>
					</c:forEach>

					<div id='divbtn' class="span2">
						<a id="btngenrpt" class="switcher" href="#" style="display: none"
							onclick="generateReport()">Generate Report &raquo;</a> <br>
						<p id="nev" align="left" style="display: none"></p>
					</div>

					<div id='divshowchart' class="span9">
						<div id="ctzchart-1" class="chart">&nbsp;</div>
						<br>
						<div id="ctzchart-2" class="chart">&nbsp;</div>
						<br>
						<div id="ctzchart-3" class="chart">&nbsp;</div>
					</div>


					<!--
					<c:forEach var="dim" items="${dimensionMap}">
  						  Country: "${dim.key}"  - Capital: "${dim.value}" - Size: ${dim.size} - Data: ${dim}
					</c:forEach>
					-->
				</div>
			</div>
		</div>

		<!-- Footer
    ================================================== -->
		<!--  <footer class="footer">
      <div class="container">
        <p>Designed and built with all the love in the world </p>
      </div>
    </footer>-->

		<!-- Le javascript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<!-- Sandip: <script src="resources/js/widgets.js"></script>-->
		<script src="resources/js/jquery.js"></script>
		<script src="resources/js/bootstrap-transition.js"></script>
		<script src="resources/js/bootstrap-alert.js"></script>
		<script src="resources/js/bootstrap-modal.js"></script>
		<script src="resources/js/bootstrap-dropdown.js"></script>
		<script src="resources/js/bootstrap-scrollspy.js"></script>
		<script src="resources/js/bootstrap-tab.js"></script>
		<script src="resources/js/bootstrap-tooltip.js"></script>
		<script src="resources/js/bootstrap-popover.js"></script>
		<script src="resources/js/bootstrap-button.js"></script>
		<script src="resources/js/bootstrap-collapse.js"></script>
		<script src="resources/js/bootstrap-carousel.js"></script>
		<script src="resources/js/bootstrap-typeahead.js"></script>
		<script src="resources/js/bootstrap-affix.js"></script>
		<!-- Sandip: <script src="resources/js/holder/holder.js"></script>-->
		<!-- Sandip: <script src="resources/js/google-code-prettify/prettify.js"></script>-->

		<script src="resources/js/application.js"></script>

		<script type="text/javascript">
			var chartNumber = 1;
			var xAxisLevel;
			var firstChartSelction;
			var chart1xAxisPoints = new Array();
			var chart1xAxisValues = new Array();
			var chart2xAxisPoints = new Array();
			var chart2xAxisValues = new Array();
			var chart3xAxisPoints = new Array();
			var chart3xAxisValues = new Array();
			var reportType = 'CONSUMPTION';

			function setReportType(reportName) {
				reportType = reportName;
			}
			
			

			
			function setTitle(title) {
				$('#reort_title_pan').text(title);
			}

			function showGenerateButton(element) {
				hideme('ctzchart-1');
				hideme('ctzchart-2');
				hideme('ctzchart-3');
				var elementId = '#' + element;
				if (validatectzchart()) {
					showme('btngenrpt');
				}
				getBreadCrumb(element);
				updateDropDownStatus(element);
			}

			function getBreadCrumb(element) {
				var elementId = '#' + element;
				var parentId = $(elementId).parent().attr('id');
				var breadCrumbMap = new Object(); // or var map = {};
				var breadCrumbDetailsMap = new Object();
				Array.prototype.reverse.call($(elementId).prevAll()).each(
						function() {
							if ($(this).attr('id') != null) {
								breadCrumbDetailsMap[$(this).attr('id')] = $(
										this).val();
							}
						});
				breadCrumbDetailsMap[element] = $(elementId).val();
				breadCrumbMap[parentId] = breadCrumbDetailsMap;
				console.log(JSON.stringify(breadCrumbMap));
				getBreadCrumbData(elementId, breadCrumbMap);
			}

			function populateDropDown(dropDownId, dataArray) {
				$(dropDownId).children('option:not(:first)').remove();
				$.each(dataArray, function(index, item) {
					$(dropDownId).append(
							"<option value='"+item+"'>" + item + "</option>");
				});
			}

			function updateDropDownStatus(element) {
				var elementId = '#' + element;
				var selectId;
				$(elementId).nextAll().each(function() {
					selectId = '#' + $(this).attr('id');
					$(selectId).val($(selectId + " option:first").val());
					if ($(this).attr('id') == $(elementId).attr('name')) {
						enablecombo($(this).attr('id'));
					} else {
						disablecombo($(this).attr('id'));
					}
				});
			}

			function getAllBreadCrumbs(includeNextLevel) {
				var dimensionArray = [ 'DIM_GEOGRAPHY', 'DIM_TIME' ];
				var breadCrumbMap = new Object();
				var parentId;
				$
						.each(
								dimensionArray,
								function(index, parent) {
									var breadCrumbDetailsMap = new Object();
									parentId = '#' + parent;
									$(parentId)
											.children()
											.each(
													function() {
														if ($(this).val() == 'select') {
															if (includeNextLevel == true
																	&& index == 0) {
																breadCrumbDetailsMap[$(
																		this)
																		.attr(
																				'id')] = firstChartSelction;
															}
															return false;
														} else if ($(this)
																.attr('id') == null) {
														} else {
															breadCrumbDetailsMap[$(
																	this).attr(
																	'id')] = $(
																	this).val();
															xAxisLevel = $(this)
																	.val();
														}
													});
									breadCrumbMap[parent] = breadCrumbDetailsMap;
								});
				return breadCrumbMap;
			}

			function generateReport() {
				//if(inputvalidatationBeforeReport()) {
				var breadCrumbMap = getAllBreadCrumbs(false);
				console.log("ReportMap:" + JSON.stringify(breadCrumbMap));
				chartNumber = 1;
				chart1xAxisPoints.length = 0;
				chart1xAxisValues.length = 0;
				chart2xAxisPoints.length = 0;
				chart2xAxisValues.length = 0;
				chart3xAxisPoints.length = 0;
				chart3xAxisValues.length = 0;
				if (reportType == 'CONSUMPTION') {
					getCustomizedConsumptionReport(breadCrumbMap, chartNumber,
							xAxisLevel);
				} else if (reportType == 'ALARM') {
					//alert('Alarm Analysis Report');
					getCustomizedAlarmReport(breadCrumbMap, chartNumber,
							xAxisLevel);
				}
				showme('ctzchart-1');
				//hideme('ctzchart-1');	
				hideme('ctzchart-2');
				hideme('ctzchart-3');
				//}
				/*else{
					alert('Please select YEAR..');
				}*/
			}
		</script>
</body>
</html>